<template>
  <BasicLayout>
    <template #wrapper>
      <el-row :gutter="20">
        <!-- <el-col :span="4">
          <div style="overflow: hidden">
            <el-card class="box-card navigation" />
            <div style="width: 100%; height: 100px" />
          </div>
        </el-col>-->

        <el-col :span="24">
          <el-card>
            <div style="float:right">
              <el-button type="primary" size="mini" @click="addSubject()">添加题目</el-button>
            </div>
            <div v-if="subjectList.length>0" class="box-card">
              <div v-for="(value, index) in subjectList" :key="index">
                <p>{{ `${index+1}、${topicType[value.subject_type]}` }}</p>
                <el-row :gutter="10" style="line-height: 10px">
                  <el-col :span="1.5">
                    <img v-if="urlTest.test(value.content)" :src="value.content" class="avatar">
                    <p v-else>{{ value.content }}（）</p>
                  </el-col>
                  <!-- <el-col :span="1.5">
                  <el-button
                    type="text"
                    style="font-size: 20px"
                    icon="el-icon-edit"
                    @click="editSubject(value,index)"
                  />
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="text"
                    style="font-size: 20px"
                    icon="el-icon-delete"
                    @click="deleteSubject(value,index)"
                  />
                  </el-col>-->
                </el-row>
                <ul style="list-style-type:none; padding-inline-start: initial">
                  <li v-for="(val, idx) in value.answer" :key="idx" style="margin-bottom: 10px">
                    <div v-if="urlTest.test(val[mapAnswer(idx)])" style="display: flex;width: 40%">
                      {{ `${mapAnswer(idx)}：` }}
                      <img
                        style="height: 100px;"
                        :src="val[mapAnswer(idx)]"
                        class="avatar"
                      >
                    </div>
                    <span v-else>{{ `${mapAnswer(idx)}：${val[mapAnswer(idx)]}` }}</span>
                  </li>
                </ul>
                <p>题目解析：</p>
                <el-row :gutter="10" style="line-height: 10px">
                  <el-col :span="1.5">
                    <img v-if="urlTest.test(value.analysis)" :src="value.analysis" class="avatar">
                    <p v-else style="line-height: 24px">{{ value.analysis }}</p>
                  </el-col>
                </el-row>
              </div>
            </div>
            <el-empty v-else :image-size="150" />
          </el-card>
          <!-- <el-card class="box-card">
            <div class="addSubject">
              <el-button
                v-for="(item,index) in topicType"
                :key="index"
                type="primary"
                plain
                @click="addSubject(item)"
              >{{ item }}</el-button>
            </div>
          </el-card>-->
        </el-col>
      </el-row>
      <Exercises :visible="visible" :id-list="idList" @cancel="cancel" @submitForm="submitForm" />
    </template>
  </BasicLayout>
</template>

<script>
import { chooseExercises } from '@/api/admin/sys-question'
import { getConfigKey, getExercises } from '@/api/admin/sys-course'
import Exercises from '@/components/Exercises'
export default {
  components: {
    Exercises
  },
  data() {
    return {
      topicType: {},
      visible: false,
      courseId: null,
      subjectList: [],
      idList: [],
      urlTest: /^http(s|):\/\/\S*?\//
    }
  },
  created() {
    this.courseId = this.$route.params && Number(this.$route.params.id)
    getConfigKey().then(response => {
      this.topicType = JSON.parse(response?.data?.configValue)
    })
    this.getExercises({ link_id: this.courseId, link_type: 3, chapter_id: 0 })
  },
  methods: {
    getExercises(value) {
      getExercises(value).then(response => {
        this.subjectList =
          response?.data?.map(item => {
            return {
              ...item,
              answer: item?.answer ? JSON.parse(item?.answer) : []
            }
          }) || []
        this.idList = response?.data?.map(item => {
          return item?.id
        })
      }) || []
    },
    mapAnswer(answer) {
      const answerArr = answer.toString().split(',')
      const newArr = answerArr.map(item =>
        String.fromCharCode(65 + parseInt(item))
      )
      return newArr.join(',')
    },
    addSubject() {
      this.visible = true
    },
    cancel() {
      this.visible = false
    },
    submitForm(ids) {
      const parmars = {
        link_id: this.courseId,
        link_type: 3,
        question_bank_str: ids
      }
      chooseExercises(parmars).then(res => {
        this.visible = false
        this.getExercises({
          link_id: this.courseId,
          link_type: 3,
          chapter_id: 0
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.navigation {
  position: fixed;
  top: 108px;
  width: 14%;
}

.testQuestions {
  height: 360px;
  border: 1px solid #dedede;
}
.addSubject {
  height: 160px;
  padding: 0 !important;
  width: calc(100% - 40px);
  margin: 20px !important;
  border: 1px solid #dedede;
  border-radius: 4px;
  text-align: center !important;
  line-height: 160px;
  position: relative;
}
</style>
